<template>
  <view class="empty" :class="[variables.ns.s('success', success)]">
    <image class="image" :src="fv.image" mode="widthFix"></image>
    <view class="text">{{ fv.text }}</view>
    <view class="reload" @click="fv.reload" v-if="fv.reload">
      {{ rootProps.emptyViewReloadText }}
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { variables } from '..';

const props = defineProps<{
  success: boolean,
  rootProps: ZPagingProps
}>()
const emits = defineEmits({
  reload: () => true
})
const fv = computed(() => {
  if (props.success) return {
    image: props.rootProps.emptyViewImg,
    text: props.rootProps.emptyViewText,
  }
  return {
    image: props.rootProps.emptyViewErrorImg,
    text: props.rootProps.emptyViewErrorText,
    reload: () => emits('reload')
  }
})
</script>

<style scoped lang="scss">
.empty {
  $gap: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
  line-height: 40rpx;
  padding: $gap 0;

  .image {
    width: 240rpx;
  }

  .text {
    margin-top: $gap;
  }

  .reload {
    margin-top: $gap;
    font-size: 24rpx;
    line-height: 34rpx;
    border: 2rpx solid ;
    width: fit-content;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
  }
}
</style>